
<template>
<!--  导航栏-->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>检测项设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--  搜索栏-->
  <el-row>
    <el-col :span="24" style="margin-top: 15px">
      <el-form inline label-width="auto" :model="testingProjectQuery">
        <el-form-item label="检测项编号">
          <el-input clearable placeholder="请输入内容" v-model="testingProjectQuery.testingProjectId"></el-input>
        </el-form-item>
        <el-form-item label="检测项名称">
          <el-input clearable placeholder="请输入内容" v-model="testingProjectQuery.testingProjectName"></el-input>
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select clearable placeholder="请选择" style="width: 120px" v-model="testingProjectQuery.testingProjectType">
            <el-option label="尺寸" :value="1"></el-option>
            <el-option label="外观" :value="2"></el-option>
            <el-option label="重量" :value="3"></el-option>
            <el-option label="性能" :value="4"></el-option>
            <el-option label="成分" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadTestingProject">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<!--  工具栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-button type="primary" @click="addTestingProject">新增</el-button>
      <el-button type="primary" >修改</el-button>
      <el-button type="primary" @click="deleteTestingProjects">删除</el-button>
      <el-button type="primary" @click="exportTetsingProjects">导出</el-button>
    </el-col>
  </el-row>
<!--  内容栏-->
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-table stripe border style="width: 100%" :data="testingProjects" @selection-change="selectTestingProject">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="testingProjectId" label="检测项编号" width="150"></el-table-column>
        <el-table-column prop="testingProjectName" label="检测项名称" width="150"></el-table-column>
        <el-table-column prop="testingProjectType" label="检测项类型" width="150">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.testingProjectType == 1">尺寸</el-tag>
            <el-tag type="warning" v-else-if="scope.row.testingProjectType == 2">外观</el-tag>
            <el-tag type="danger" v-else-if="scope.row.testingProjectType == 3">重量</el-tag>
            <el-tag type="info" v-else-if="scope.row.testingProjectType == 4">性能</el-tag>
            <el-tag type="primary" v-else-if="scope.row.testingProjectType == 5">成分</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="testingProjectTool" label="检测工具" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="text" @click="editTestingProject(scope.row.testingProjectId)">修改</el-button>
            <el-button type="text" @click="deleteTestingProject(scope.row.testingProjectId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--  分页栏-->
  <el-row style="margin-top: 15px">
  <el-row style="margin-top: 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
</el-row>
<!--  新增弹窗-->
  <el-dialog title="新增检测项" v-model="dialogVisibleAdd" width="50%" align-center>
    <el-form label-width="130px">
      <el-form-item label="检测项编号">
        <el-input placeholder="请输入检测项编号" v-model="newTestingProject.testingProjectId"></el-input>
      </el-form-item>
      <el-form-item label="检测项名称">
        <el-input placeholder="请输入检测项名称" v-model="newTestingProject.testingProjectName"></el-input>
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select placeholder="请选择" style="width: 120px" v-model="newTestingProject.testingProjectType">
          <el-option label="尺寸" :value="1"></el-option>
          <el-option label="外观" :value="2"></el-option>
          <el-option label="重量" :value="3"></el-option>
          <el-option label="性能" :value="4"></el-option>
          <el-option label="成分" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测工具">
        <el-input placeholder="请输入检测工具" v-model="newTestingProject.testingProjectTool"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input placeholder="请输入备注" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAddTetstingProject" >确定</el-button>
        <el-button @click="cancelAddTestingProject">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--  编辑弹窗-->
  <el-dialog title="编辑检测项" v-model="dialogVisibleEdit" width="50%" align-center>
    <el-form label-width="130px">
      <el-form-item label="检测项编号">
        <el-input placeholder="请输入检测项编号" v-model="selectByIdTestingProject.testingProjectId"></el-input>
      </el-form-item>
      <el-form-item label="检测项名称">
        <el-input placeholder="请输入检测项名称" v-model="selectByIdTestingProject.testingProjectName"></el-input>
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select placeholder="请选择" style="width: 120px" v-model="selectByIdTestingProject.testingProjectType">
          <el-option label="尺寸" :value="1"></el-option>
          <el-option label="外观" :value="2"></el-option>
          <el-option label="重量" :value="3"></el-option>
          <el-option label="性能" :value="4"></el-option>
          <el-option label="成分" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检测工具">
        <el-input placeholder="请输入检测工具" v-model="selectByIdTestingProject.testingProjectTool"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitEditTestingProject">确定</el-button>
        <el-button @click="cancelEditTestingProject">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import testingProjectRequest from "@/api/defece/testingProject.js";
// 封装查询对象
let testingProjectQuery = ref({});
let testingProjects = ref([]);
let curPage = ref(1);
let total = ref(0);
// 新增按钮的弹窗控制事件
let dialogVisibleAdd = ref(false);
// 封装新增检测项的数据
let newTestingProject = ref({});
// 编辑弹窗的控制事件
let dialogVisibleEdit = ref(false);
// 根据id查询到的检测项信息
let selectByIdTestingProject = ref({});
// 存放被选中的缺陷id
let testingProjectId= ref([])
// 导出数据的点击事件
function exportTetsingProjects(){
  testingProjectRequest.exportTestingProject(testingProjectQuery.value,curPage.value,10,res=>{
    if (res.code==200){
      ElMessage({
        message: "导出成功",
        type: "success"
      })
    }
  });
}
// 获取被选择缺陷的id
function selectTestingProject(queryTable){
  let listTestingProject = new Array();
  queryTable.forEach(item=>{
    listTestingProject.push(item.testingProjectId);
    testingProjectId.value = listTestingProject;
    console.log(testingProjectId.value)
  })
}
// 根据id进行批量删除
function deleteTestingProjects(){
  for (let i=0;i<testingProjectId.value.length;i++){
    deleteTestingProject(testingProjectId.value[i]);
  }
}
// 删除按钮的点击事件
function deleteTestingProject(testingProjectId){
  testingProjectRequest.loadDeleteTestingProjectById(testingProjectId,res=>{
    if (res.code==200){
      ElMessage({
        message: "删除成功",
        type: "success"
      })
    }
    loadTestingProject();
  })
}
// 编辑弹窗的确认事件
function submitEditTestingProject(){
  testingProjectRequest.loadUpdateTestingProject(selectByIdTestingProject.value,res=>{
    if (res.code==200){
      ElMessage({
        message: "修改成功",
        type: "success"
      })
    }
    dialogVisibleEdit.value = false;
    loadTestingProject();
  })
}
// 编辑弹窗的取消事件
function cancelEditTestingProject(){
  dialogVisibleEdit.value = false;
  selectByIdTestingProject.value = {};
}
// 编辑按钮的点击事件
function editTestingProject(testingProjectId){
  testingProjectRequest.loadSelectByIdTestingProject(testingProjectId,res=>{
    selectByIdTestingProject.value = res.data;
    dialogVisibleEdit.value = true;
    console.log(selectByIdTestingProject.value)
  })
}
// 新增按钮的点击事件
function addTestingProject(){
  dialogVisibleAdd.value = true;
}
// 新增弹窗的取消按钮事件
function cancelAddTestingProject(){
  dialogVisibleAdd.value = false;
}
// 新增弹窗的确认按钮事件
function submitAddTetstingProject(){
  testingProjectRequest.loadAddTestingProject(newTestingProject.value,res=>{
    if (res.code==200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
    dialogVisibleAdd.value = false;
    newTestingProject.value = {};
  })
}
// 加载项目列表
function loadTestingProject(){
  testingProjectRequest.loadTestingProject(testingProjectQuery.value,curPage.value,10,res=>{
    total.value = res.data.total;
    testingProjects.value = res.data.list;
    console.log(testingProjects.value)
  })
}
// 分页事件
function changePage(value){
  curPage.value = value;
  loadTestingProject();

}
onMounted(()=>{
  loadTestingProject();
})
</script>
<style scoped>

</style>